<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="3">
          <el-image class="image" :src="img" lazy/>
        </el-col>
        <el-col :span="20">
          <div class="desc">
            <el-link @click.prevent.stop="onClick" class="title">{{ title }}</el-link>
            <div class="author">{{ author }} 著</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "BookItemHorizontal",
  props: {
    img: String,
    author: String,
    title: String
  },
  methods: {
    onClick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
.title {
  justify-content: start;
  color: #59c6ff;
}

.author {
  color: #777;
}

.desc {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 82px;
}

.image {
  height: 80px;
  width: 80px;
}
</style>